<template>
  <CommonPage :show-header="false">
    <n-form ref="formRef" inline label-placement="top" :model="model">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi
          :span="12"
          label="文章标题"
          path="title"
          :rule="{
            required: true,
            message: '请输入标题',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="model.title" type="text" placeholder="请输入文章标题" clearable />
        </n-form-item-gi>
        <n-form-item-gi
          :span="12"
          label="文章首图URL"
          path="firstPicture"
          :rule="{
            required: true,
            message: '请输入文章首图URL',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="model.firstPicture" type="text" placeholder="请输入文章首图URL" clearable />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="分类" path="category">
          <n-select
            v-model:value="model.categoryId"
            :options="categoryOptions"
            label-field="categoryName"
            value-field="id"
            placeholder="请选择分类"
            clearable
          />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="标签" path="tagList">
          <n-select
            v-model:value="model.tagList"
            :options="tagOptions"
            label-field="tagName"
            value-field="id"
            placeholder="请选择标签"
            clearable
            multiple
          />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="文章描述" path="description">
          <MdEditor v-model="model.description" style="height: calc(100vh - 305px)" dark:bg-dark />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="文章正文" path="content">
          <MdEditor v-model="model.content" style="height: calc(100vh - 305px)" dark:bg-dark />
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="字数" path="words">
          <n-input v-model:value="model.words" type="text" disabled />
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="阅读时长(分钟)" path="readTime">
          <n-input v-model:value="model.readTime" type="text" disabled />
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="浏览次数" path="views">
          <n-input v-model:value="model.views" type="text" disabled />
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-button type="primary" style="width: 80px" :loading="btnLoading" ml-auto @click="handleUpdateBlog">
      <TheIcon v-if="!btnLoading" icon="line-md:confirm-circle" class="mr-5" :size="18" /> 保存
    </n-button>
  </CommonPage>
</template>

<script setup>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { getBlogById, saveBlog } from '@/api/blog/blog.js'
import { getCategoryDict, getTagDict } from '@/api/dict.js'
import { useTagsStore } from '@/store'
const tagsStore = useTagsStore()

// defineOptions({ name: 'MDEditor' })

// refs
let btnLoading = ref(false)
let model = ref({})

const categoryOptions = ref([])
const tagOptions = ref()

const router = useRouter()
const route = useRoute()

onMounted(() => {
  getData()
  getDict()
})

function handleUpdateBlog(e) {
  console.log(model.value)
  btnLoading.value = true
  $message.loading('正在保存...')
  saveBlog(model.value).then((reponse) => {
    if (reponse.code == '0') {
      $message.success('保存成功')
    }
  })
  tagsStore.removeTag(route.path)
  router.push(`/blog/blog`)
  btnLoading.value = false
}

function getData() {
  // console.log(route.params.id)
  if (route.params.id) {
    getBlogById(route.params.id).then((res) => {
      model.value = res.data
    })
  }
}

function getDict() {
  getCategoryDict().then((res) => {
    // console.log(res.data)
    categoryOptions.value = res.data
  })

  getTagDict().then((res) => {
    // console.log(res.data)
    tagOptions.value = res.data
  })
}
</script>

<style lang="scss">
.md-preview {
  ul,
  ol {
    list-style: revert;
  }
}
</style>
